<template>
    <div class="card">
        <div class="card_shop_name">{{ shopInfo.name }}</div>
        <div class="card_list">
            <div class="card_list_item" v-for="item in shops" :key="item.id">
                <div class="card_list_item_img">
                    <img :src="`http://www.dell-lee.com/imgs/vue3/${item.imgName}.png`" alt="">
                </div>
                <div class="card_list_item_content">
                    <div class="card_list_item_content_title">{{ item.title }}</div>
                    <div class="card_list_item_content_price">
                        <span class="highlight"></span>
                        <span>{{ item.price }}</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="card_total">共{{ numbers }}件</div>
    </div>
</template>

<script setup>
import { useRoute } from 'vue-router';
import { ref } from 'vue'
const id = ref(0)
const shops = ref([])
const route = useRoute()
id.value = route.query.id
try {
    shops.value = JSON.parse(route.query.shops);
} catch (error) { }
console.log(shops.value);
const numbers = route.query.number
console.log(numbers);
const shopInfo = ref([])
try {
    shopInfo.value = JSON.parse(route.query.shopInfo)
    console.log(shopInfo.value);
} catch (error) { }
</script>

<style lang="scss" scoped>
@import "../style/viriables.scss";
@import "../style/mixins.scss";

.card {
    margin: .18rem;
    padding: .18rem;
    background-color: $bgColor;

    &_shop_name {
        line-height: .42rem;
        font-size: .16rem;
        margin-bottom: .18rem;
    }

    &_list {
        &_item {
            display: flex;
            margin-bottom: .18rem;

            &_img {
                width: .48rem;
                margin-right: .18rem;

                img {
                    width: .48rem;
                    height: .48rem;
                }
            }

            &_content {
                flex: 1;
                display: flex;
                flex-direction: column;
                justify-content: space-around;

                &_title {
                    font-size: .14rem;
                    font-weight: bold;
                    color: $content_fontcolor;
                    @include ellipse;
                }

                &_price {
                    display: flex;
                    justify-content: space-between;

                    .highlight {
                        color: $hightlight-fontColor;
                    }
                }
            }
        }
    }

    &_total {
        line-height: .26rem;
        text-align: center;
        font-size: .14rem;
        color: $light-fontColor;
        background-color: $search-bgColor;
    }
}
</style>